<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>系统常态化运行评分系统</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../admin/css/other/result.css" />
</head>

<body class="pear-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-col-md12" style="display: flex; justify-content: center; 
            align-items: center; height: 100%; margin-bottom: 10px; font-size: 18px;font-weight: 600;">
                指标概览（依据最后一次评分数据）
            </div>
            <div class="" id="scoreContent" >

            </div>
        </div>
        <div class="layui-row layui-col-space10 layui-col-md12" id="systemContent">

        </div>

        <!-- 模板 -->
        <script type="text/html" id="template">
    {{#  for (var i = 0; i < d.length; i++) { }}
        <div class="layui-col-md12" style="background-color: #fff; margin-bottom: 4px;margin-left:4px;">
            <div class="layui-font-16" style=" margin-bottom: 10px;">
                {{ d[i].systemName }}
                （指标总分：{{d[i].totalScore}}）
                {{ d[i].systemName.indexOf('掘进')!=-1 ? '（掘进系统未评价总分按0.6系数得分）' : '' }}
            </div>
            {{#  for (var j = 0; j < d[i].cards.length; j++) { }}
                <div class="layui-col-md1" style="background-color: #fff; padding: 5px; ">
                    <div class="jClick border_right"
                     data-cardid="{{ d[i].cards[j].cardId }}" 
                     data-pf="{{ d[i].cards[j].pfIdList }}" 
                    data-systemname="{{ d[i].systemName }}" 
                    data-cardname="{{ d[i].cards[j].cardName }}" 
                    data-score="{{ d[i].cards[j].totalScore }}" 

                     style="cursor: pointer;">
                        <div class="layui-font-14" style="text-align: center;height: 38px;line-height: 16px;">
                            {{ d[i].cards[j].cardName }}
                            <!-- 压风系统关键参数在线检测率 -->
                        </div>
                        <div style="display: flex; justify-content: space-around; margin-top: 2px;">
                            {{# for (var k = 0; k < d[i].cards[j].analyzeCardItems.length; k++) { }}
                                <div 
                                    class="layui-font-12"
                                    style="width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                                    
                                    <div style="margin-bottom: 2px;" class="layui-font-gray">{{ d[i].cards[j].analyzeCardItems[k].mineName }}</div>
                                    
                                    {{# var level = d[i].cards[j].analyzeCardItems[k].level; }}
                                    {{# var className = 'mylevel'+level; }}
                                    {{# var fontColor = 'mylevelFont'+level}}
                                    <div class="{{ fontColor }} layui-font-20 ">{{ d[i].cards[j].analyzeCardItems[k].sjScore==null?'--':d[i].cards[j].analyzeCardItems[k].sjScore}}</div>
                                </div>
                            {{# } }}
                        </div>
                        
                    </div>
                </div>
            {{#  } }}
        </div>
    {{#  } }}
</script>

    </div>
    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>
    <script src="../../scripts/utils/request.js"></script>
    <script src="../../scripts/utils/auth.js"></script>
    <script src="../../scripts/echart/pfechart.js"></script>
    <script src="../../scripts/minearea.js"></script>
    <script>
        var detailContent = {}
        function getData() {
            return detailContent;
        }
        var $, table, form, drawer, popup, notice, laydate, button, echarts
        layui.use(['table', 'form', 'jquery', 'drawer', 'popup', 'notice', 'laydate', 'button', 'echarts'], function () {
            table = layui.table;
            form = layui.form;
            $ = layui.jquery;
            drawer = layui.drawer;
            popup = layui.popup;
            notice = layui.notice;
            laydate = layui.laydate;
            button = layui.button;
            echarts = layui.echarts;
            const leverData = [{
                lever: 1,
                className: 'mylevel1',
                fontColor: 'mylevelFont1'
            }, {
                lever: 2,
                className: 'mylevel2',
                fontColor: 'mylevelFont2'
            }, {
                lever: 3,
                className: 'mylevel3',
                fontColor: 'mylevelFont3'
            }
            ]
            function getStyleByLevel(level) {
                const style = leverData.find(item => item.lever === level);
                return style ? style : { className: '', fontColor: '' }; // 返回对应的样式，默认返回空对象
            }
            postAjaxNoSuccessTip('/api/analyse/getStatData', null, function (response) {
                var data = response.data.analyzeCardItems;

                const scoreContent = document.getElementById('scoreContent');

                // 遍历数据并生成相应的 DOM 结构
                data.forEach(item => {
                    // 获取对应的 className
                    const levelClass = leverData.find(lev => lev.lever === item.level).fontColor;

                    // 创建新的 DOM 元素
                    const card = document.createElement('div');

                    // 根据 data 的长度添加不同的类名
                    if (data.length === 1) {
                        card.classList.add('layui-col-md12');
                    } else {
                        card.classList.add('layui-col-md6');
                    }
                    let level='未知'
                    if(item.sjScore==null){
                        level='未知'
                    }else if(item.sjScore<80){
                        level='不合格'
                    }else if(item.sjScore<85){
                        level='合格'
                    }else if(item.sjScore<90){
                        level='优良'
                    }else if(item.sjScore>=90){
                        level='优秀'
                    }

                    // 生成卡片内容
                    if (data.length === 1) {
                        // 只有一个 item 的格式
                        card.innerHTML = `
            <div class="layui-font-20" style="background-color: #fff;display: flex; justify-content: center; align-items: center; height: 60px;"">
                <div class="layui-font-14 jTotalScore" style="border-bottom: none; height: 24px;">
                    ${item.mineName}总分:
                     <span class="layui-font-20 layui-font-black" >${item.sjScore==null?'--':item.sjScore} ${"["+level+"]"}</span>
                </div>
            </div>
        `;
                    } else {
                        // 多于一个 item 的格式
                        card.innerHTML = `
            <div class="layui-font-20 " style="background-color: #fff;display: flex; justify-content: center; align-items: center; height: 60px;">
                <div class="layui-font-14 jTotalScore" style="border-bottom: none; height: 24px;">
                    ${item.mineName}总分:
                    <span class="layui-font-20 layui-font-black" >${item.sjScore==null?'--':item.sjScore}${"["+level+"]"}</span>
                </div>
            </div>
        `;
                    }

                    // 将新创建的 card 添加到 scoreContent 中
                    scoreContent.appendChild(card);

            });
        }, null);

        postAjaxNoSuccessTip('/api/analyse/getStatDataCard', null, function (response) {
            var data = response.data;

            // 处理数据以适配模板
            const renderData = Object.keys(data).map(system => ({
                systemName: system,
                cards: data[system],
                totalScore: system.indexOf('自建')==-1? data[system].reduce((acc, cur) => acc + Number(cur.totalScore), 0):100
            }));

            // 使用 layui 的模板引擎进行渲染
            const templateHtml = layui.laytpl($('#template').html());
            $('#systemContent').html(templateHtml.render(renderData));

            // 添加点击事件
            $(document).on('click', '.jClick', function () {
                const cardId = $(this).data('cardid'); // 获取 cardId
                const systemName = $(this).data('systemname'); // 获取 systemName
                const cardName = $(this).data('cardname'); // 获取 cardName
                const pf = $(this).data('pf'); // 获取 pfIdList
                if(pf==null||pf==''){
                    notice.info('暂未数据');
                    return;
                }
                detailContent.cardId = cardId;
                detailContent.systemName = systemName;
                detailContent.cardName = cardName;
                detailContent.pf = pf;
                // console.log(detailContent, 'detailContent');
                layer.open({
                    type: 2,
                    offset: 'r',
                    anim: 'slideLeft', // 从右往左
                    area: ['80%', '100%'],
                    shade: 0.1,
                    shadeClose: true,
                    id: 'ID-demo-layer-direction-r',
                    content: './IndicatorDetail.html'
                });
            });
            // 添加鼠标悬停事件
            $(document).on('mouseenter', '.jClick', function () {
                const score = $(this).data('score'); // 获取 systemName
                layer.tips('指标总分：' + score, this, {
                    tips: [1, '#16b777'], // 气泡样式，第一个参数为气泡的角标位置，第二个参数为气泡背景色
                    time: 0 // 不自动关闭
                });
            });

            // 或者，如果您需要在鼠标离开时执行某些操作，可以使用 mouseleave
            $(document).on('mouseleave', '.jClick', function () {
                // 悬停结束时的逻辑
                layer.closeAll('tips');
            });


             // 添加鼠标悬停事件
             $(document).on('mouseenter', '.jTotalScore', function () {
                const score = $(this).data('tip'); // 获取 systemName
                layer.tips('优秀:分值≥90<br/>优良:90＞分值≥85<br/>合格:85＞分值≥80<br/>不合格:分值＜80<br/>', this, {
                    tips: [1, '#16b777'], // 气泡样式，第一个参数为气泡的角标位置，第二个参数为气泡背景色
                    time: 0 // 不自动关闭
                });
            });
            // 或者，如果您需要在鼠标离开时执行某些操作，可以使用 mouseleave
            $(document).on('mouseleave', '.jTotalScore', function () {
                // 悬停结束时的逻辑
                layer.closeAll('tips');
            });

        }, null);
        });
    </script>
    <style>
        .mylevel1 {
            background-color: #16b777;
        }
        .mylevelFont1 {
            color: #16b777;
        }
        .mylevelFont2 {
            color: red;
        }
        .mylevel2 {
            background-color: #fff;
        }
        .mylevelFont3 {
            color: #000;
        }
        .mylevel3 {
            background-color: #fff;
        }

        

        .jClick {
            border-right: 1px solid #ccc;
            /* 默认添加右边框 */
            padding: 4px;
            /* 添加内边距（可选） */
            box-sizing: border-box;
            /* 确保内边距和边框不影响总宽度 */
        }

        .jClick:not(:last-child) {
            border-right: 1px solid #ccc;
            /* 仅在不是最后一个元素时添加 */
        }

        .colorContent {
            display: flex;
            align-items: center;
            margin-right: 4px;
            margin-bottom: 4px;
        }

        .whStyle {
            width: 50px;
            height: 20px;
            margin-right: 4px;
        }
    </style>
</body>

</html>